<div class="tabPanel" data-dojo-attach-point="rangeContainer">
    
    <div class="controls">
        
        <div class="controlGroup">
            <label data-dojo-attach-point='rangeCenterLabel'>Center Point</label>
            <div class="controlItem">
                <input class="jimu-input coordInput" placeholder="Enter Coordinates" data-dojo-attach-point="rangeCenter" />
                <div class="controlItem paddedLeft">
                  <div class='add-with-icon'>
                    <span title="Format Input" class="jimu-icon jimu-icon-setting" data-dojo-attach-point="coordinateFormatButton"></span>
                  </div>
                  <div class='add-with-icon'>
                    <div title="Add Point" class="draw" data-dojo-attach-point="addPointBtn"></div>
                  </div>
                </div>
        </div>
        <div class="controlGroup">
            <input class="interactive-checkbox" type="checkbox" data-dojo-attach-point="interactiveRings" />
            <label data-dojo-attach-point="interactiveLabel">Create Rings Interactively</label>
        </div>
        </div>

        <div class="controlGroup">
            <label>Number of Rings</label>
            <div class="controlItem" data-dojo-attach-point="numRingsDiv">
                <input data-dojo-attach-point="numRingsInput"
                       type="text"
                       data-dojo-type="dijit/form/NumberTextBox"
                       name="numRings"
                       required="true" ,
                       value="5"
                       data-dojo-props="constraints:{
                  min:1,
                  max: 100,
                  places: 0
                },
                 rangeMessage:'Invalid number of rings',
                 invalidMessage: 'Enter a numeric value'
               " />
            </div>
        </div>

        <div class="controlGroup">
            <label>Distance Between Rings</label>
            <div class="controlItem" data-dojo-attach-point="ringIntervalDiv">
                <input data-dojo-attach-point="ringIntervalInput"
                       type="text"
                       data-dojo-type="dijit/form/ValidationTextBox"
                       name="ringInterval"
                       required="true"
                       value="1000"                       
                       regExp="[0-9]*|([0-9]+[,][0-9]+)*"
                       invalidMessage='Enter a single numeric value or multiple comma seperated values (1000,2000,3000)'/>
                <select data-dojo-attach-point="ringIntervalUnitsDD"
                        style="width: 100px"
                        class="controlSpace noResize"
                        data-dojo-type="dijit/form/Select">
                    <option value="feet">Feet</option>
                    <option value="kilometers">Kilometers</option>
                    <option value="miles">Miles</option>
                    <option value="meters" selected="selected">Meters</option>
                    <option value="nautical-miles">Nautical Miles</option>
                    <option value="yards">Yards</option>
                </select>
            </div>
        </div>
        
        <div class="controlGroup">
            <label>Number of Radials</label>
            <div class="controlItem" data-dojo-attach-point="numRadialsInputDiv">
                <input data-dojo-attach-point="numRadialsInput"
                       type="text"
                       data-dojo-type="dijit/form/NumberTextBox"
                       name="numRadials"
                       required="false" ,
                       value="3"
                       data-dojo-props="constraints:{
              min:0,
              max: 360,
              places: 0
            },
             rangeMessage:'Invalid number of radials the maximum allowed is 360',
             invalidMessage: 'Enter a numeric value'
           " />
            </div>
        </div>
        
        <div class="buttonContainer">
          <div class='jimu-btn jimu-state-disabled' data-dojo-attach-point='okButton' data-dojo-attach-event="onclick: okButtonClicked">OK</div>
          <div class='jimu-btn' data-dojo-attach-point='clearGraphicsButton'>Clear Graphics</div>
        </div>
        
    </div>
</div>